<template>
	<view class="content">

		<view class="head-tab" :style="[{height:CustomBar + 'px'}]">
			<view class="view flex middle fixed" :style="style">
				<view class="back cuIcon-back  middle" @click="back">

				</view>
				<scroll-view scroll-x="true" class="tab-box">
					<view class="item  align-center " v-for="(tab,i) in taber" :key="i" @click="changeTab(i)"
						:class="tabIndex==i?'hover':'nohover'">
						<view class="title1" :class="tabIndex==i?'hover':'nohover'">
							{{tab.name}}
						</view>
						<view class="cuIcon-title text-red" v-if="tab.notice">

						</view>

					</view>
				</scroll-view>

			</view>

		</view>
		<mescroll-body ref="mescrollRef" height="80%" bottom="" class="mescroll-body" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="list flex flex-wrap justify-between">
				<view class="item-box " v-for="(item,index) in  list" :key="index" @click="jumpTo(index)">
					<image :src="res+item.bg" mode=""></image>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getData
	} from "@/static/cloudClassroom/api.js"

	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				title: "云课堂",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				taber: [{
						name: "直播",
						path: "/pages/cloudClassroom/zhibo",
						type: 0
					},
					{
						name: "回放",
						path: "/pages/cloudClassroom/zhibo",
						type: 1
					},
					{
						name: "关注",
						path: "/pages/cloudClassroom/zhibo",
						notice: true,
						type: 2
					}

				],
				list: null,
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 5 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看',
						textNoMore: '-- 没有更多了 --'
					},

				},



			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			changeTab(i) {
				this.list=[];
				this.tabIndex = i;
				this.mescroll.resetUpScroll();
			},
			jumpTo(index) {
				uni.navigateTo({
					url: "./onlineClass?id="+this.list[index].id
				})
			},
			upCallback(page) {
				console.log("type" + this.taber[this.tabIndex].type);
				getData(page.num, page.size, this.taber[this.tabIndex].type).then(curPageData => {
					this.mescroll.endSuccess(curPageData.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(curPageData);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixed{
		width: 100vw;
		position:fixed;
		top: 0;
		background-color: #F7F7F7;
		z-index: 99;

	}
	.content {
		$w: calc(100vw*(710/750));

		width: $w;



		.head-tab {
			width: 100vw;

			.view {
				.cuIcon-back {
					height: inherit;
					margin-left: calc(100vw*(40/750));
					font-size: calc(100vw*(40/750));
					margin-top: 6rpx;
					color: #333333;
				}

				height: inherit;

				.tab-box {
					height: inherit;
					white-space: nowrap;
					font-family: PingFang SC;

					.hover {
						font-size: calc(100vw*(40/750));
						font-weight: 800;
						color: #333333;
					}

					.nohover {
						font-size: 32rpx;
						font-weight: 500;
						color: #999999;
					}

					.item {
						margin-left: calc(100vw*(40/750));
						display: inline-flex;
						position: relative;
						height: inherit;

						.cuIcon-title {
							margin-top: -20rpx;
						}
					}

				}

			}






		}

		.mescroll-body {
			width: $w;
			margin-top: -20rpx;
			margin-left: calc(100vw*(20/750));
			.list {
				width: $w;
				min-height: 200rpx;
				.item-box {
					margin-top: 30rpx;
					width: calc(100vw*(340/750));
					height: calc(100vw*(500/750));
					border-radius: 20rpx;
					image {
						width: inherit;
						height: inherit;
					}
				}
			}
		}
	}
</style>
